<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>路由</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>Hello App!</h1>
			<p>
				<!--使用 router-link 组件来导航-->
				<!--通过传入'to'属性指定链接-->
				<!--<router-link> 默认会被渲染成一个 <a> 标签-->
				<router-link to="/foo">GO TO FOO</router-link>
				<router-link to="/bar">GO TO BAR</router-link>
			</p>
		    <!--路由出口-->
		    <!--路由匹配到的组件将渲染在这里-->
			<router-view></router-view>
		</div>
	</body>
	<script type="text/javascript">
		//	1.定义路由组件
//		可以从其他文件import进来
		const Foo = {template:'<div>foo</div>'}
		const Bar = {template:'<div>bar</div>'}
//		2.定义路由
//		每个路由应该映射一个组件.其中'component'可以是通过 Vue.extend() 创建的组件构造器,或者,只是一个组件配置对象.
		const routes=[
		    {path:'/foo',component:Foo},
		    {path:'/bar',component:Bar}
		]
//		3.创建路由实例,然后传'routes'配置
        const router = new VueRouter({
        	routes // 缩写 相当于routes:routes
        })
//      4.创建和挂载根实例
        const app= new Vue({
        	router
        }).$mount('#app')
	</script>
</html>
